<template>
  <div class="center-preview"
       :style='{"padding":"0 7%","margin":"20px auto 40px","flexWrap":"wrap","background":"#fff","display":"flex","width":"100%","position":"relative","justifyContent":"space-between"}'>
    <div class="title"
         :style='{"padding":"0","margin":"20px auto 20px","borderColor":"#ffc652","color":"#222","textAlign":"center","background":"url(http://codegen.caihongy.cn/20240117/e2da3af842f44f9f86c61d0ff295414d.png) no-repeat center center / 35%","borderWidth":"0px 0 0 ","width":"100%","fontSize":"24px","borderStyle":"solid","fontWeight":"600","height":"40px"}'>
      {{ title }}
    </div>

    <div class="info"
         :style='{"padding":"0","boxShadow":"0 0px 0px rgba(0, 0, 0, 0.3)","margin":"20px 0 0","borderColor":"#28890b20","alignItems":"center","display":"block","justifyContent":"center","borderRadius":"0px","flexWrap":"wrap","background":"#fff","borderWidth":"0px","width":"250px","position":"relative","borderStyle":"solid","height":"auto","order":"3"}'>
      <div
          :style='{"padding":"0px 20px","borderColor":"#f9eacc","margin":"0 20px 0 0","color":"#fff","textAlign":"center","letterSpacing":"0px","borderRadius":"0px","borderWidth":"0px","background":"#0062a5","width":"100%","lineHeight":"44px","fontSize":"16px","borderStyle":"solid","fontWeight":"600","height":"auto"}'>
        个人信息
      </div>
      <div
          :style='{"padding":"20px 0","borderColor":"#0062a530","margin":"0 0 10px","borderWidth":"1px 1px","width":"100%","fontSize":0,"borderStyle":"solid","height":"auto"}'
      >
        <el-image
            :style='{"boxShadow":"1px 2px 4px #ddd","margin":"0 auto","borderColor":"#fcfcfc","objectFit":"cover","borderRadius":"100%","borderWidth":"4px","display":"block","width":"100px","borderStyle":"solid","height":"100px"}'
            :src="sessionForm.touxiang?baseUrl + sessionForm.touxiang:require('@/assets/avator.png')"
            fit="cover"></el-image>
      </div>
      <div
          :style='{"padding":"0 0px","borderColor":"#f9eacc","margin":"0 0 0px 0","borderWidth":"0px","background":"none","display":"flex","width":"100%","lineHeight":"40px","borderStyle":"solid","height":"auto"}'
      >
        <span class="icon iconfont icon-shouye-zhihui"
              :style='{"padding":"0 5px","fontSize":"14px","color":"#333","display":"none"}'></span>
        <div :style='{"margin":"0 10px 0 0","fontSize":"14px","color":"#333","display":"inline-block"}'>用户账号</div>
        <div :style='{"color":"#999","textAlign":"left","fontSize":"14px"}'>{{ sessionForm.yonghuzhanghao }}</div>
      </div>
      <div
          :style='{"padding":"0 0px","borderColor":"#f9eacc","margin":"0 0 0px 0","borderWidth":"0px","background":"none","display":"flex","width":"100%","lineHeight":"40px","borderStyle":"solid","height":"auto"}'
      >
        <span class="icon iconfont icon-shouye-zhihui"
              :style='{"padding":"0 5px","fontSize":"14px","color":"#333","display":"none"}'></span>
        <div :style='{"color":"#333","margin":"0 10px 0 0","fontSize":"14px"}'>用户姓名</div>
        <div :style='{"color":"#999","textAlign":"left","fontSize":"14px"}'>{{ sessionForm.yonghuxingming }}</div>
      </div>
      <div
          :style='{"padding":"0 0px","borderColor":"#f9eacc","margin":"0 0 0px 0","borderWidth":"0px","background":"none","display":"flex","width":"100%","lineHeight":"40px","borderStyle":"solid","height":"auto"}'
      >
        <span class="icon iconfont icon-shouye-zhihui"
              :style='{"padding":"0 5px","fontSize":"14px","color":"#333","display":"none"}'></span>
        <div :style='{"color":"#333","margin":"0 10px 0 0","fontSize":"14px"}'>性别</div>
        <div :style='{"color":"#999","textAlign":"left","fontSize":"14px"}'>{{ sessionForm.xingbie }}</div>
      </div>
      <div
          :style='{"padding":"0 0px","borderColor":"#f9eacc","margin":"0 0 0px 0","borderWidth":"0px","background":"none","display":"flex","width":"100%","lineHeight":"40px","borderStyle":"solid","height":"auto"}'
      >
        <span class="icon iconfont icon-shouye-zhihui"
              :style='{"padding":"0 5px","fontSize":"14px","color":"#333","display":"none"}'></span>
        <div :style='{"color":"#333","margin":"0 10px 0 0","fontSize":"14px"}'>电话</div>
        <div :style='{"color":"#999","textAlign":"left","fontSize":"14px"}'>{{ sessionForm.dianhua }}</div>
      </div>

    </div>

    <el-tabs tab-position="left"
             :style='{"width":"calc(100% - 300px)","margin":"20px 0 0","flexWrap":"wrap","background":"#fff","display":"flex","order":"1"}'
             @tab-click="handleClick">
      <el-tab-pane label="个人中心">
        <el-form class="center-preview-pv" ref="sessionForm" :model="sessionForm" :rules="rules" label-width="100px">
          <el-form-item v-if="userTableName=='yonghu'"
                        :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
                        label="用户账号" prop="yonghuzhanghao">
            <el-input v-model="sessionForm.yonghuzhanghao" placeholder="用户账号"
                      readonly></el-input>
          </el-form-item>
          <el-form-item v-if="userTableName=='yisheng'"
                        :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
                        label="医生账号" prop="yonghuzhanghao">
            <el-input v-model="sessionForm.yonghuzhanghao" placeholder="医生账号"
                      readonly></el-input>
          </el-form-item>
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="用户姓名" prop="yonghuxingming">
            <el-input v-model="sessionForm.yonghuxingming" placeholder="用户姓名"></el-input>
          </el-form-item>
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="性别" prop="xingbie">
            <el-select v-model="sessionForm.xingbie" placeholder="请选择性别">
              <el-option v-for="(item, index) in dynamicProp.xingbie" :key="index" :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="电话" prop="dianhua">
            <el-input v-model="sessionForm.dianhua" placeholder="电话"></el-input>
          </el-form-item>
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="头像1" prop="touxiang">
            <file-upload
                tip="点击上传头像"
                action="file/upload"
                :limit="1"
                :multiple="true"
                :fileUrls="sessionForm.touxiang?sessionForm.touxiang:''"
                @change="yonghutouxiangHandleAvatarSuccess"
            ></file-upload>
          </el-form-item>
          <el-form-item :style='{"padding":"0","margin":"0"}'>
            <el-button
                :style='{"border":"0px solid #eccc19","cursor":"pointer","padding":"0","margin":"0 20px 0 0","color":"#fff","borderRadius":"20px","background":"#0062a5","width":"110px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                type="primary" @click="onSubmit('sessionForm')">更新信息
            </el-button>
            <el-button
                :style='{"border":"1px solid #ccc","cursor":"pointer","padding":"0","margin":"0","outline":"none","color":"#666","borderRadius":"20px","background":"none","width":"110px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                type="danger" @click="logout">退出登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <el-form class="center-preview-pv" ref="passwordForm" :model="passwordForm" :rules="passwordRules"
                 label-width="100px">
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="原密码" prop="password">
            <el-input type="password" v-model="passwordForm.password" placeholder="原密码"></el-input>
          </el-form-item>
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="新密码" prop="newpassword">
            <el-input type="password" v-model="passwordForm.newpassword" placeholder="新密码"></el-input>
          </el-form-item>
          <el-form-item
              :style='{"width":"auto","padding":"0px","margin":"0 0 40px","background":"#fff","display":"inline-block"}'
              label="确认密码" prop="repassword">
            <el-input type="password" v-model="passwordForm.repassword" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item :style='{"padding":"0","margin":"0"}'>
            <el-button
                :style='{"border":"0px solid #eccc19","cursor":"pointer","padding":"0","margin":"0 20px 0 0","color":"#fff","borderRadius":"20px","background":"#0062a5","width":"110px","lineHeight":"40px","fontSize":"14px","height":"40px"}'
                type="primary" @click="updatePassword">修改密码
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-for="(item,index) in menuList" :key="index" v-if="hasBack(item.menu)" :label="item.child[0].menu"
                   :name="item.child[0].tableName"></el-tab-pane>
      <el-tab-pane label="我的发布"></el-tab-pane>
      <el-tab-pane v-if="userTableName=='yonghu'" label="我的收藏"></el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import config from '@/config/config'
import menu from '@/config/menu'
import Vue from 'vue'

export default {
  //数据集合
  data() {
    return {
      title: '个人中心',
      baseUrl: config.baseUrl,
      sessionForm: {},
      passwordForm: {},
      passwordRules: {
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ],
        newpassword: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "blur"
          }
        ],
        repassword: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: "blur"
          }
        ]
      },
      rules: {},
      menuList: [],
      disabled: false,
      uploadUrl: config.baseUrl + 'file/upload',
      imageUrl: '',
      headers: {Token: localStorage.getItem('frontToken')},
      userTableName: localStorage.getItem('UserTableName'),
      dynamicProp: {},
    }
  },
  created() {
    let menus = menu.list()
    for (let x in menus) {
      if (menus[x].tableName == this.userTableName) {
        this.menuList = menus[x].backMenu
      }
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'yonghuzhanghao', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'mima', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'yonghuxingming', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'xingbie', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'dianhua', null);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.sessionForm, 'touxiang', null);
    }

    if ('yonghu' == this.userTableName && this.rules['yonghuzhanghao']) {
      this.rules['yonghuzhanghao'].push({required: true, message: '请输入用户账号', trigger: 'blur'})
    } else if ('yonghu' == this.userTableName && !this.rules['yonghuzhanghao']) {
      this.$set(this.rules, 'yonghuzhanghao', [{required: true, message: '请输入用户账号', trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName && this.rules['mima']) {
      this.rules['mima'].push({required: true, message: '请输入密码', trigger: 'blur'})
    } else if ('yonghu' == this.userTableName && !this.rules['mima']) {
      this.$set(this.rules, 'mima', [{required: true, message: '请输入密码', trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName && this.rules['yonghuxingming']) {
      this.rules['yonghuxingming'].push({required: true, message: '请输入用户姓名', trigger: 'blur'})
    } else if ('yonghu' == this.userTableName && !this.rules['yonghuxingming']) {
      this.$set(this.rules, 'yonghuxingming', [{required: true, message: '请输入用户姓名', trigger: 'blur'}]);
    }
    if ('yonghu' == this.userTableName) {
      this.$set(this.rules, 'dianhua', [{required: false, validator: this.$validate.isMobile, trigger: 'blur'}]);
    }

    this.init();
    this.sessionForm = JSON.parse(localStorage.getItem('sessionForm'))
  },
  //方法集合
  methods: {
    init() {

      this.dynamicProp.xingbie = '男,女'.split(',');

    },
    setSession() {
      localStorage.setItem('sessionForm', JSON.stringify(this.sessionForm))
    },
    onSubmit(formName) {
      if (`yonghu` == this.userTableName && this.sessionForm.touxiang != null) {
        this.sessionForm.touxiang = this.sessionForm.touxiang.replace(new RegExp(this.$config.baseUrl, "g"), "");
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post(this.userTableName + '/update', this.sessionForm).then(res => {
            if (res.data.code == 0) {
              this.setSession()
              this.$message({
                message: '更新成功',
                type: 'success',
                duration: 1500
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    yonghutouxiangHandleAvatarSuccess(fileUrls) {
      this.sessionForm.touxiang = fileUrls;
    },
    handleClick(tab, event) {
      switch (event.target.outerText) {
        case '个人中心':
          tab.$router.push('/index/center');
          break;
        case '修改密码':
          this.passwordForm = {
            password: '',
            newpassword: '',
            repassword: '',
          }
          this.$forceUpdate()
          break;
        case '我的发布':
          tab.$router.push('/index/myForumList');
          break;
        case '我的收藏':
          localStorage.setItem('storeupType', 1);
          tab.$router.push('/index/storeup');
          break;
        default:
          tab.$router.push(`/index/${tab.name}?centerType=1`);
      }

      this.title = event.target.outerText;
    },
    async updatePassword() {
      this.$refs["passwordForm"].validate(async valid => {
        if (valid) {
          var password = "";
          if (this.sessionForm.mima) {
            password = this.sessionForm.mima;
          } else if (this.sessionForm.password) {
            password = this.sessionForm.password;
          }
          if (this.passwordForm.password != password) {
            this.$message.error("原密码错误");
            return;
          }
          if (this.passwordForm.newpassword != this.passwordForm.repassword) {
            this.$message.error("两次密码输入不一致");
            return;
          }
          if (this.passwordForm.newpassword == this.passwordForm.password) {
            this.$message.error("新密码与原密码相同！");
            return;
          }
          if (this.userTableName == 'yonghu') {
          }
          this.sessionForm.password = this.passwordForm.newpassword;
          this.sessionForm.mima = this.passwordForm.newpassword;
          this.$http.post(`${this.userTableName}/update`, this.sessionForm).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改密码成功,下次登录系统生效",
                type: "success",
                duration: 1500,
                onClose: () => {
                }
              });
              this.setSession()
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      })
    },
    logout() {
      localStorage.clear();
      Vue.http.headers.common['Token'] = "";
      this.$router.push('/index/home');
      this.activeIndex = '0'
      localStorage.setItem('keyPath', this.activeIndex)
      this.$forceUpdate()
      this.$message({
        message: '登出成功',
        type: 'success',
        duration: 1500,
      });
    },
    hasBack(name) {
      switch (name) {
        case '我的收藏管理':
          return false
          break;
        default:
          return true
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.center-preview {

  .el-tabs {
    & /deep/ .el-tabs__header {
      .el-tabs__nav {
        overflow: auto;
      }

      ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 6px;
        height: 6px;
      }

      ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0;
      }

      ::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.15);
        transition: color 0.2s ease;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3);
      }

      .el-tabs__nav-wrap {
        margin: 0;

        &::after {
          content: none;
        }
      }

      .el-tabs__active-bar {
        display: none !important;
      }
    }

    .center-preview-pv {
      .el-date-editor.el-input {
        width: auto;
      }

      .balance {
        .el-input {
          width: auto;
        }
      }
    }
  }
}

.center-preview .el-tabs /deep/ .el-tabs__header {
  padding: 0px;
  margin: 0 50px 0 0;
  background: none;
  display: flex;
  width: 200px;
  border-color: #0062a530;
  border-width: 1px;
  position: relative;
  border-style: solid;
  flex-wrap: wrap;
  text-align: center;
  height: auto;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item {
  padding: 0 10px;
  color: #666;
  background: #fff;
  font-weight: 500;
  width: 198px;
  font-size: 14px;
  line-height: auto;
  transition: 400ms;
  text-align: center;
  height: auto;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
  padding: 0 10px;
  color: #fff;
  background: #0062a5;
  font-weight: 600;
  font-size: 16px;
  line-height: auto;
  text-align: center;
  height: auto;
}

.center-preview .el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
  padding: 0 10px;
  color: #fff;
  background: #0062a5;
  font-weight: 600;
  width: 100%;
  font-size: 16px;
  line-height: auto;
  text-align: center;
  height: auto;
}

.center-preview .el-tabs /deep/ .el-tabs__content {
  padding: 30px 20px 40px;
  margin: 0;
  background: #fff;
  flex: 1;
  width: calc(100% - 250px);
  border-color: #eee;
  border-width: 1px;
  float: left;
  border-style: solid;
}

.center-preview .el-tabs /deep/ .el-tabs__content .el-tab-pane {
  width: 100%;
}

.center-preview-pv .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #666;
  font-weight: 500;
  width: 100px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.center-preview-pv .el-form-item .el-form-item__content {
  margin-left: 100px;
}

.center-preview-pv .el-input /deep/ .el-input__inner {
  border-radius: 0px;
  padding: 0 12px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  outline: none;
  color: #666;
  width: auto;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  min-width: 150px;
  height: 40px;
}

.center-preview-pv .el-select /deep/ .el-input__inner {
  border-radius: 0px;
  padding: 0 12px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  outline: none;
  color: #666;
  width: auto;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  min-width: 150px;
  height: 40px;
}

.center-preview-pv .el-date-editor /deep/ .el-input__inner {
  border-radius: 0px;
  padding: 0 10px 0 30px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  outline: none;
  color: #666;
  width: 200px;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  height: 40px;
}

.center-preview-pv /deep/ .avatar-uploader-icon {
  cursor: pointer;
  border-radius: 2px;
  color: #999;
  width: 130px;
  font-size: 24px;
  border-color: #eee;
  border-width: 1px;
  line-height: 50px;
  border-style: solid;
  text-align: center;
  height: 50px;
}

.center-preview-pv .el-form-item.balance /deep/ .el-input__inner {
  border-radius: 0px;
  padding: 0 12px;
  color: #666;
  display: inline-block;
  width: 200px;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  height: 36px;
}
</style>
